import React from 'react';
import { Modal } from 'antd';
import FlowParameters, {
  formatParameters,
} from "components/flowdetailpannel/FlowParameters"

class ParametersEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flowParameters: props.value || [],
    };
  }

  render() {
    const {
      handleOk,
      handleCancel,
      handleError,
      modelVariableRef,
      modelForms,
    } = this.props;
    const { flowParameters } = this.state;

    return (
      <Modal
        title="编辑变量"
        visible
        onOk={() => {
          const { flowParameters: v } = this.state;
          handleOk(formatParameters(v, modelForms));
        }}
        onCancel={handleCancel}
        width="642px"
        centered
        destroyOnClose
      >
        <FlowParameters
          modelVariableRef={modelVariableRef}
          onChange={(v) => this.setState({ flowParameters: v })}
          onError={(msg) => handleError(msg)}
          value={flowParameters}
          modelForms={modelForms}
        />
      </Modal>
    );
  }
}

export default ParametersEditor;
